<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .row-odd{
            background-color: rgb(229, 253, 209);
        }
        .row-even{
            background-color: rgb(253, 209, 236);
        }
    </style>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>位置</th>
                <th>技能</th>
                <th>经验值</th>
            </tr>

        </thead>
        <tbody>
            <!-- <tr>
                <td>李白</td>
                <td>刺客</td>
                <td>青莲剑歌</td>
                <td>500</td>
            </tr> -->
        </tbody>
    </table>
    <script>
        var tbodyEle = document.querySelector('tbody')
        // var tr = document.createElement('tr')

        // var td1 = document.createElement('td')
        // td1.innerText = '李白'
        // tr.append(td1)

        // var td2 = document.createElement('td')
        // td2.innerText = '刺客'
        // tr.append(td2)

        // var td3 = document.createElement('td')
        // td3.innerText = '青莲剑歌'
        // tr.append(td3)

        // var td4 = document.createElement('td')
        // td4.innerText = '500'
        // tr.append(td4)

        var data = [
            {
                "name": "李白",
                "position": "刺客",
                "skill": "青莲剑歌",
                "exp": 500
            },
            {
                "name": "貂蝉",
                "position": "刺客/法师",
                "skill": "绽·风华",
                "exp": 350
            },
            {
                "name": "鲁班",
                "position": "射手",
                "skill": "空中支援",
                "exp": 800
            },
            {
                "name": "李白",
                "position": "刺客",
                "skill": "青莲剑歌",
                "exp": 500
            },
            {
                "name": "貂蝉",
                "position": "刺客/法师",
                "skill": "绽·风华",
                "exp": 350
            },
            {
                "name": "鲁班",
                "position": "射手",
                "skill": "空中支援",
                "exp": 800
            }
        ];

        for (var i in data) {
            var hero = data[i]
            var tr = document.createElement('tr')
            // var rowClass;
            // if(i%2==0){
            //     // rowClass = 'row-odd'
            // }else{
            //     // rowClass = 'row-even'
            // }
            var rowClass = i%2==0 ? 'row-odd' : 'row-even'
            tr.classList.add(rowClass)
            for (var key in hero) {
                var td = document.createElement('td')
                td.innerText = hero[key]
                tr.append(td)
            }
            tbodyEle.append(tr)
        }



    </script>
</body>

</html>